{% extends "base.html" %}

{% block maintitle %}
  Oppia Editor
{% endblock maintitle %}

{% block subtitle %}
  {{ title }}
{% endblock subtitle %}

{% block header_js %}
  {{ super() }}
  <script type="text/javascript">
    GLOBALS.can_edit = JSON.parse('{{can_edit|js_string}}');
    GLOBALS.INTERACTION_SPECS = JSON.parse('{{INTERACTION_SPECS|js_string}}');
    GLOBALS.INVALID_PARAMETER_NAMES = JSON.parse('{{INVALID_PARAMETER_NAMES|js_string}}');
    GLOBALS.NEW_STATE_TEMPLATE = JSON.parse(
      '{{NEW_STATE_TEMPLATE|js_string}}');
  </script>

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    if (window.google && window.google.load) {
      google.load('visualization', '1', {packages: ['corechart']});
    } else {
      throw 'error: Could not load google visualization library. Are you offline?';
    }
  </script>

  <style>
    html, body {
      background-color: #eee;
    }
  </style>

  {{dependencies_html}}
{% endblock header_js %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb ng-cloak" ng-controller="EditorNavbarBreadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      <span ng-if="navbarTitle">
        <[navbarTitle]>
        <span class="oppia-navbar-breadcrumb-separator" style="margin-left: 5px;"></span>
        <span>
          <[getCurrentTabName()]>
        </span>
      </span>
      <span ng-if="!navbarTitle">
        Loading...
      </span>
    </li>
  </ul>
{% endblock navbar_breadcrumb %}

{% block local_top_nav_options %}
  <ul class="nav navbar-nav oppia-navbar-nav navbar-right ng-cloak" ng-controller="EditorNavigation" style="margin-left: 20px;">
    <li ng-class="{'active': getTabStatuses().active === 'main', 'dropdown': countWarnings()}">
      <a href="#" tooltip="Editor" tooltip-placement="<[countWarnings() ? 'left' : 'bottom']>" ng-click="selectMainTab()" class="protractor-test-main-tab">
        <span class="glyphicon glyphicon-pencil"></span>
      </a>
      <div ng-show="countWarnings()" class="oppia-exploration-warnings-indicator" ng-click="selectMainTab()">
        <span class="oppia-exploration-warnings-count">
          <[countWarnings()]>
        </span>
      </div>
      <ul class="dropdown-menu oppia-exploration-warnings-box">
        <span class="oppia-exploration-warnings-header">Warnings</span>
        <li class="oppia-exploration-warnings-text" ng-repeat="warning in getWarnings() track by $index">
          <hr class="oppia-exploration-warnings-separator">
          <[warning]>
        </li>
      </ul>
    </li>

    {% if username %}
      <li ng-class="{'active': getTabStatuses().active === 'preview'}">
        <a href="#" tooltip="Preview" tooltip-placement="bottom" ng-click="selectPreviewTab()" class="protractor-test-preview-tab">
          <span class="glyphicon glyphicon-play"></span>
        </a>
      </li>
    {% endif %}

    <li ng-class="{'active': getTabStatuses().active === 'settings'}">
      <a href="#" tooltip="Settings" tooltip-placement="bottom" ng-click="selectSettingsTab()" class="protractor-test-settings-tab">
        <span class="glyphicon glyphicon-cog"></span>
      </a>
    </li>

    {% if username %}
      <li ng-class="{'active': getTabStatuses().active === 'stats'}">
        <a href="#" tooltip="Statistics" tooltip-placement="bottom" ng-click="selectStatsTab()">
          <span class="glyphicon glyphicon-stats"></span>
        </a>
      </li>
    {% endif %}

    <li ng-class="{'active': getTabStatuses().active === 'history'}">
      <a href="#" tooltip="History" tooltip-placement="bottom" ng-click="selectHistoryTab()" disabled="explorationRightsService.isCloned()" class="protractor-test-history-tab">
        <span class="glyphicon glyphicon-time"></span>
      </a>
    </li>

    <li ng-class="{'active': getTabStatuses().active === 'feedback'}">
      <a href="#" tooltip="Feedback" tooltip-placement="bottom" tooltip-append-to-body="true" ng-click="selectFeedbackTab()">
        <span class="glyphicon glyphicon-comment"></span>
      </a>
    </li>

    {% if username %}
      <li class="dropdown">
        <a href="#" tooltip="Help" tooltip-placement="right" class="dropdown-toggle" data-toggle="dropdown">
          <span class="glyphicon glyphicon-question-sign"></span>
        </a>
        <ul class="dropdown-menu" ng-mouseover="onMouseoverDropdownMenu($event)" ng-mouseleave="onMouseoutDropdownMenu($event)">
          <li class="dropdown">
            <a href="#" ng-click="openEditorTutorial()">Tutorial</a>
          </li>
          <li class="dropdown">
            <a href="https://code.google.com/p/oppia/wiki/PlanningYourExploration" target="_blank">
              Planning Your Exploration
            </a>
          </li>
          <li class="dropdown">
            <a href="https://code.google.com/p/oppia/wiki/DesignTips" target="_blank">
              Exploration Design Tips
            </a>
          </li>
        </ul>
        <div ng-if="postTutorialHelpPopoverIsShown" class="popover bottom oppia-post-tutorial-popover">
          <div class="arrow"></div>
          <div class="popover-content">If you need help in the future, click here!</div>
        </div>
      </li>
    {% endif %}
  </ul>

  <ul class="nav navbar-nav oppia-navbar-nav navbar-right ng-cloak" ng-controller="ExplorationSaveAndPublishButtons">
    <li ng-if="isPrivate()">
      <div class="btn-group" style="margin-right: 10px; margin-top: 8px;"
           title="<[getPublishExplorationButtonTooltip()]>">
        <button type="button" class="btn btn-default protractor-test-publish-exploration"
                ng-class="{'btn-success': !isExplorationLockedForEditing() && !countWarnings()}"
                ng-click="showPublishExplorationModal()"
                ng-disabled="isExplorationLockedForEditing() || countWarnings()">
          Publish to Gallery
        </button>
      </div>
    </li>

    <li ng-if="isEditableOutsideTutorialMode()">
      <div dropdown class="btn-group" style="margin-right: 10px; margin-top: 8px;">
        <button class="btn btn-default protractor-test-save-changes" ng-class="{'btn-success': isExplorationSaveable()}" ng-click="saveChanges()" ng-disabled="!isExplorationSaveable()">
          <span ng-if="!isSaveInProgress">
            <span ng-if="!isPublic()">Save Draft</span>
            <span ng-if="isPublic()">Publish Changes</span>
            <span ng-if="getChangeListLength()">(<[getChangeListLength()]>)</span>
          </span>
          <span ng-if="isSaveInProgress">
            <span ng-if="!isPublic()">Saving...</span>
            <span ng-if="isPublic()">Publishing...</span>
          </span>
        </button>
        <button type="button" class="btn btn-default dropdown-toggle protractor-test-save-discard-toggle"
                ng-disabled="!isExplorationSaveable()" dropdown-toggle>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a ng-click="discardChanges()" ng-class="{'oppia-disabled-link': !isExplorationSaveable()}" class="protractor-test-discard-changes" title="Discard all pending changes.">Discard Draft</a></li>
        </ul>
      </div>
    </li>
  </ul>
{% endblock local_top_nav_options %}

{% block content %}
  {% if announcement %}
    <div class="oppia-align-center oppia-warning">
      {{ announcement }}
    </div>
  {% endif %}

  <div ng-controller="ExplorationEditor" ng-cloak>
    <script type="text/ng-template" id="modals/publishExploration">
      <div class="modal-header">
        <h3>Publish Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Congratulations, you are about to publish an exploration!
        </p>
        <p>
          <strong>Important:</strong> Site moderators are likely to remove published explorations that do not meet the following basic criteria (<a href="/about#publication-criteria" target="_blank">why?</a>):
          <ul>
            <li>It should help its intended audience learn something new.</li>
            <li>It should convey more than a single isolated factoid.</li>
            <li>It should provide useful feedback and guidance to help the learner.</li>
            <li>It should not substantially duplicate existing explorations.</li>
          </ul>
        </p>
        <p>
          You can read more about these criteria on the
          <a href="/about#publication-criteria" target="_blank">About page</a>.
          If your exploration meets them all, please feel free to publish it so that others
          can learn from and improve it!
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-success protractor-test-confirm-publish" ng-click="publish()">Publish Exploration</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/deleteExploration">
      <div class="modal-header">
        <h3>Delete Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Really delete this exploration? <strong>This action cannot be reversed.</strong>
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-danger" ng-click="reallyDelete()">Delete Exploration</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/saveExploration">
      <div class="modal-header">
        <h3>Save Exploration</h3>
      </div>
      <div class="modal-body">
        <p>
          <span ng-if="commitMessageIsOptional">(Optional)</span>
          Please enter a brief description of what you have changed:
          <textarea rows="3" cols="50" ng-model="commitMessage" focus-on="saveChangesModalOpened" class="protractor-test-commit-message-input"></textarea>
        </p>

        <div ng-if="explorationChangesExist">
          <em>
            You changed the following properties of the exploration:
          </em>
          <ul>
            <li ng-repeat="(propertyName, changeInfo) in explorationPropertyChanges">
              <[formatExplorationPropertyChange(propertyName, changeInfo)]>
            </li>
          </ul>
        </div>

        <p ng-if="addedStates.length > 0">
          <em>You added the following states</em>: <strong><[formatStateList(addedStates)]></strong>
        </p>

        <div ng-if="stateChangesExist">
          <em>
            You made the following changes to states:
          </em>
          <div ng-repeat="(stateName, stateChanges) in statePropertyChanges">
            <h5><[stateName]></h5>
            <ul>
              <li ng-repeat="(propertyName, changeInfo) in stateChanges">
                <[formatStatePropertyChange(propertyName, changeInfo)]>
              </li>
            </ul>
          </div>
        </div>

        <p ng-if="deletedStates.length > 0">
          <em>You deleted the following states:</em> <strong><[formatStateList(deletedStates)]></strong>
        </p>

        <p ng-if="changedStates.length > 0">
          <em>You changed the following states:</em> <strong><[formatStateList(changedStates)]></strong>
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-success protractor-test-close-save-modal" ng-disabled = "!commitMessageIsOptional && !commitMessage" ng-click="save(commitMessage)">Save Exploration</button>
      </div>
    </script>

    <div class="container-fluid" ng-joy-ride="tutorialInProgress" config="EDITOR_TUTORIAL_OPTIONS" on-finish="onLeaveTutorial()" on-skip="onLeaveTutorial()">
      <div class="row" ng-if="explorationRightsService.isCloned()">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <div class="oppia-align-center alert alert-warning" style="padding: 2px; width: 90%;">
            <strong>Note:</strong> This is a private, unpublishable copy of a
            <a ng-href="<[getExplorationUrl(explorationRightsService.clonedFrom())]>" target="_blank">public exploration</a>.
          </div>
        </div>
      </div>

      <div ng-show="getTabStatuses().active === 'main'">
        <div class="row">
          <div class="col-lg-9 col-md-9 col-sm-9">
            {% include 'editor/state_editor.html' %}
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3">
            <div class="oppia-editor-sidebar hidden-xs">
              <div>
                {% include 'editor/exploration_graph.html' %}
              </div>
              <div>
                {% include 'editor/state_statistics.html' %}
              </div>
              <div>
                {% include 'editor/sidebar_state_parameter_changes.html' %}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- This is an ng-if, so that the preview loads the latest version of the exploration each time the tab is accessed. -->
      <div ng-if="getTabStatuses().active === 'preview'">
        {% include 'editor/exploration_preview.html' %}
      </div>

      <div ng-show="getTabStatuses().active === 'stats'">
        {% include 'editor/exploration_statistics.html' %}
      </div>

      <div ng-show="getTabStatuses().active === 'settings'">
        {% include 'editor/exploration_settings.html' %}
      </div>

      <div ng-show="getTabStatuses().active === 'history'">
        {% include 'editor/exploration_history.html' %}
      </div>

      <div ng-show="getTabStatuses().active === 'feedback'">
        {% include 'editor/exploration_feedback.html' %}
      </div>
    </div>
  </div>

  <!-- These definitions must be included exactly once on the page for the graph SVGs to work in Firefox. -->
  <svg width="0" height="0">
    <defs>
      <marker id="arrowhead" viewBox="-5 -5 18 18" refX="10" refY="6"
              markerWidth="6" markerHeight="9" orient="auto">
        <path d="M -5 0 L 12 6 L -5 12 z" fill="grey"></path>
      </marker>
      <marker id="arrowhead-green" viewBox="-5 -5 18 18" refX="10" refY="6"
              markerWidth="6" markerHeight="9" orient="auto">
        <path d="M -5 0 L 12 6 L -5 12 z" fill="#1F7D1F"></path>
      </marker>
      <marker id="arrowhead-red" viewBox="-5 -5 18 18" refX="10" refY="6"
              markerWidth="6" markerHeight="9" orient="auto">
        <path d="M -5 0 L 12 6 L -5 12 z" fill="#B22222"></path>
      </marker>
      <linearGradient id="nodegradient" x1="0%" x2="100%" y1="0%" y2="0%">
        <stop offset="0%" style="stop-opacity: 1; stop-color: darkseagreen;"></stop>
        <stop offset="100%" style="stop-opacity: 0.1; stop-color: darkseagreen;"></stop>
      </linearGradient>
    </defs>
  </svg>

  <script type="text/ng-template" id="inline/param_change_editor">
    {% include 'components/param_change_editor.html' %}
  </script>

  <script type="text/ng-template" id="inline/rule_editor">
    {% include 'components/rule_editor.html' %}
  </script>

  {% include 'components/exploration_embed_button.html' %}
  {% include 'components/visualizations.html' %}

{% endblock content %}

{% block footer_js %}
  {{ super() }}
  <script src="/third_party/static/d3js-3.4.11/d3.min.js"></script>
  <script>
    {{ include_js_file('editor/ExplorationEditor.js') }}
    {{ include_js_file('editor/EditorServices.js') }}
    {{ include_js_file('editor/ExplorationGraph.js') }}
    {{ include_js_file('editor/ExplorationPreview.js') }}
    {{ include_js_file('components/explorationEmbedButton.js') }}
    {{ include_js_file('components/valueGeneratorEditor.js') }}
    {{ value_generators_js }}
    {{ include_js_file('components/objectEditor.js') }}
    {{ object_editors_js }}
    {{ include_js_file('editor/RouterServices.js') }}
    {{ include_js_file('editor/ExplorationStatistics.js') }}
    {{ include_js_file('editor/ExplorationSettings.js') }}
    {{ include_js_file('editor/ExplorationHistory.js') }}
    {{ include_js_file('editor/HistoryServices.js') }}
    {{ include_js_file('editor/ExplorationFeedback.js') }}
    {{ include_js_file('editor/SidebarStateName.js') }}
    {{ include_js_file('editor/SidebarStateParameterChanges.js') }}
    {{ include_js_file('editor/StateEditor.js') }}
    {{ include_js_file('editor/StateRules.js') }}
    {{ include_js_file('editor/StateStatistics.js') }}
    /* These should come after the valueGeneratorEditor scripts. */
    {{ include_js_file('editor/StateInteraction.js') }}
    {{ include_js_file('player/PlayerServices.js') }}
    {{ include_js_file('player/StateTransitionService.js') }}
    {{ include_js_file('components/paramChangeEditor.js') }}
    {{ include_js_file('components/ruleEditor.js') }}
    {% for skin_js_url in skin_js_urls %}
      {{ include_skins_js_file(skin_js_url) }}
    {% endfor %}
  </script>

  {{ skin_templates }}
  {{ interaction_templates }}
{% endblock footer_js %}
